<template>
  <!-- 登录大Box start -->
  <div class="login-box">
    <div class="user-info">
      <div class="title">
        <div class="title-photo">
          <img src="@/assets/img/nbclogogreen.png" alt="" />
        </div>
      </div>
      <div class="title-text">FaDMESCloud</div>
      <div class="title-text">数智化工厂协同平台</div>
      <div class="user-operate">
        <div class="entering-box">
          <!-- <div class="user-input">
            <div class="input-name">使用账套</div>
            <div class="input-box">
              <a-input v-model="formInline.userName" />
            </div>
          </div> -->
          <div class="user-input">
            <div class="input-name">用户账户：</div>
            <div class="input-box">
              <a-input allowClear v-model="formInline.userName" />
            </div>
          </div>
          <div class="user-input">
            <div class="input-name">用户密码：</div>
            <div class="input-box">
              <a-input-password
                allowClear
                @keyup.enter.native="Gettoken()"
                v-model="formInline.password"
              />
            </div>
          </div>
        </div>

        <!-- <div class="operate-box">
              <a-checkbox v-model="pwdChecked">记住密码</a-checkbox>
            </div> -->
        <div class="login-click">
          <div class="login-button" @click="Gettoken()">用户登录</div>
        </div>
      </div>
      <!-- <div class="logo">
        <img src="@/assets/img/chcontrol.png" alt="" />
      </div> -->
    </div>

    <div class="nbc-footer-illustrate">
      <span>版权所有: 广州中浩控制技术有限公司 </span>
      <a href="https://beian.miit.gov.cn/" target="blank"
        >粤ICP备14061567号-3</a
      >
    </div>

    <!-- 修改密码 -->
    <a-modal
      title="修改密码"
      :visible="changePwdVisible"
      :closable="false"
      :maskClosable="false"
      :keyboard="false"
    >
      <a-form layout="vertical">
        <a-form-item label="原密码" required>
          <a-input-password v-model="changePwdForm.oldPassword" />
        </a-form-item>
        <a-form-item label="新密码" required>
          <a-input-password v-model="changePwdForm.newPassword" />
        </a-form-item>
        <a-form-item label="确认密码" required>
          <a-input-password v-model="changePwdForm.confirmPassword" />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button @click="changePwdVisible = false">取消</a-button>
        <a-button type="primary" @click="handleChangePwd">确定</a-button>
      </template>
    </a-modal>
  </div>

  <!-- 登录大Box end -->
</template>

<script>
import { login, modifyPassword } from "../../api/login/index.js";
import { getUserResource, getUserResourceList } from "@/api/Resource/resource";
import { Base64 } from "@/common/base64";
import { getReports } from "@/api/Common/index";
export default {
  data() {
    return {
      formInline: {
        userName: null,
        password: null,
      }, //输入信息载体
      pwdChecked: false, //是否记住密码
      isValidation: false, //是否验证账号
      // 在data中添加
      changePwdVisible: false,
      changePwdForm: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
    };
  },
  methods: {
    //登录跳转
    loginToHome() {
      window.sessionStorage.setItem(
        "tabBlockList",
        JSON.stringify([{ path: "/home", name: "首页", ResourceName: "首页" }])
      );

      window.sessionStorage.setItem("tabCacheList", JSON.stringify(["/home"]));
      this.$router.push("/home");
    },
    //回车登录
    keyDown(e) {
      // 回车则执行登录方法 enter键的ASCII是13
      if (e.keyCode == 13 || e.keyCode == 100) {
        this.Gettoken(); // 定义的登录方法
      }
    },
    //获取资源权限
    async getUserResource() {
      let res = await getUserResource();

      if (res.Status == 10000) {
        localStorage.setItem("userresource", JSON.stringify(res.Data));
      }
    },
    //获取菜单资源
    async getUserResourceList() {
      let res = await getUserResourceList();

      if (res.Status == 10000) {
        localStorage.setItem("usermenu", JSON.stringify(res.Data));
      }
    },
    //登录获取token
    async Gettoken() {
      // const data = {
      // 	userName: this.formInline.userName,
      // 	password: this.formInline.password
      // };
      // const res = await Gettoken(data);
      // if (res.code == 200) {
      // 	localStorage.setItem('token', JSON.stringify(res.body));
      // 	this.login();
      // 	this.$message.success(res.desc)
      // }else{
      // 	this.$message.error(res.desc)
      // }

      let oldusername = localStorage.getItem("nbcUsername");
      const data = {
        userModel: {
          Account: this.formInline.userName,
          Password: this.formInline.password,
        },

        system: "WEB",
      };
      const res = await login(data);

      if (res.Status == 10000) {
        localStorage.setItem(
          "nbcToken",
          JSON.stringify("Bearer " + res.Data.Token)
        );
        //localStorage.setItem('token', JSON.stringify("Bearer " + res.Data.Token));
        localStorage.setItem("nbcUserInfo", JSON.stringify(res.Data));
        let { userName, password } = this.formInline;
        localStorage.setItem("nbcUsername", userName);
        if (this.pwdChecked) {
          localStorage.setItem("nbcPassword", Base64.encode(password));
        } else {
          localStorage.removeItem("nbcPassword");
        }
        await this.getUserResource();
        await this.getUserResourceList();
        this.getReportsFun();
        console.log(oldusername, userName, this.isValidation);
        if (this.isValidation && oldusername == userName) {
          this.$router.go(-1);
        } else {
          this.loginToHome();
        }
      } else if (res.Status == 203) {
        localStorage.setItem("useraccount", this.formInline.userName);
        this.$message.error(res.Message);
        this.changePwdVisible = true;
      } else {
        this.$message.error(res.Message);
      }
    },
    //获取报表列表
    async getReportsFun() {
      let res = await getReports();
      let Array = [];
      let obj = {};
      res.Data.map((item) => {
        item.ReportList.map(
          (rdata) => (rdata.ReportGroupName = item.ReportGroupName)
        );
        Array.push(...item.ReportList);
      });
      console.log(Array);
      if (Array.length > 0) {
        Array.map((data) => {
          obj[data.ReportName] = {
            param1: "ctl00$ContentPlaceHolder1$TreeView1",
            param2: `s诺斯贝尔MES报表\\${data.ReportGroupName}\\${data.ReportPath}`,
          };
        });
      }
      localStorage.setItem("reportObj", JSON.stringify(obj));
    },
    // 在methods中添加
    async handleChangePwd() {
      try {
        const res = await modifyPassword({
          Account: this.formInline.userName,
          OldPassword: this.changePwdForm.oldPassword,
          FirstPassword: this.changePwdForm.newPassword,
          SecondPassword: this.changePwdForm.confirmPassword,
        });

        if (res.Status === 10000) {
          this.$message.success("密码修改成功，请重新登录");
          this.changePwdVisible = false;
          this.formInline.password = ""; // 清空登录密码
          this.changePwdForm = {
            // 重置表单
            oldPassword: "",
            newPassword: "",
            confirmPassword: "",
          };
        } else {
          this.$message.error(res.Message || "密码修改失败");
        }
      } catch (error) {
        this.$message.error("请求失败，请检查网络");
      }
    },
  },
  created() {
    // 从路由参数中获取 validation 值
    const validationParam = this.$route.query.redirect;
    if (validationParam !== undefined) {
      this.isValidation = true; // 转换为布尔值
    }
    let username = localStorage.getItem("nbcUsername");
    let userpwd = localStorage.getItem("nbcPassword");
    if (typeof username == "string") {
      this.pwdChecked = true;
      this.formInline = {
        userName: username,
        password: Base64.decode(userpwd),
      };
    } else {
      this.pwdChecked = false;
    }
  },
};
</script>

<style lang="less" scoped>
.login-box {
  height: 100%;
  background: url(../../assets/img/20230512174525.gif) no-repeat;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;

  .user-info {
    top: 10%;
    right: -2%;
    position: absolute;
    width: 34%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 72%;
    justify-content: center;
    .title {
      font-weight: 700;
      letter-spacing: 0.3125rem;
      display: flex;
      color: #ffffff;
      align-items: center;
      justify-content: center;
      width: 70%;
      padding-bottom: 1.25rem;
      box-sizing: border-box;
      .title-photo {
        width: 15.25rem;
        height: 5.8rem;
        img {
          height: 100%;
          width: 100%;
        }
      }
    }
    .title-text {
      font-style: italic;
      text-align: center;
      letter-spacing: 0.3125rem;
      height: 4rem;
      font-size: 2.4rem;

      color: #ffffff;
    }
    .user-operate {
      margin-left: 3%;
      margin-top: 4rem;
      width: 60%;
      align-self: center;
      display: flex;
      flex-direction: column;
    }

    .user-input {
      margin-bottom: 2.625rem;
      display: flex;
      align-items: center;
      justify-content: center;
      .input-name {
        font-weight: 700;
        letter-spacing: 0.1875rem;
        font-size: 1rem;
        color: #ffffff;
      }
      .input-box {
        font-size: 1rem;
        font-weight: bold;
        width: 70%;
      }
    }
    .operate-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #999999;
      font-weight: bold;
      font-size: 1rem;
      margin-bottom: 2.5rem;

      /deep/ .ant-checkbox-wrapper {
        span {
          color: #999999;
          font-weight: bold;
          font-size: 1rem;
        }
      }
    }
    .login-click {
      .login-button {
        background: #20b2aa;
        border-radius: 0.3rem;
        text-align: center;
        cursor: pointer;
        padding: 0.4rem 0;
        letter-spacing: 3px;
        margin: 0 1rem;
        color: #ffffff;
        font-weight: bold;
        font-size: 1rem;
      }
    }
  }
  .logo {
    width: 70%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1%;
  }
}
.nbc-footer-illustrate {
  color: #ffffff;
  position: absolute;
  bottom: 1%;
  left: 50%;
  transform: translate(-50%);
  letter-spacing: 0.0625rem;
  font-weight: 700;
}
</style>
